<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生主页</title>
<!-- 引入jQuery.js文件 -->
<script type="text/javascript" src="../static/jquery-easyui-1.4.1/jquery.js"></script>
<link rel="stylesheet" href="../static/jquery-easyui-1.4.1/themes/gray/easyui.css">
<!-- 引入easyui小图标文件  -->
<link rel="stylesheet" href="../static/jquery-easyui-1.4.1/themes/icon.css">
<script type="text/javascript"src="../static/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"src="../static/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
.form-control {
	display: block;
	height: 34px;
	padding: 3px 8px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
}
</style>
<script type="text/javascript">
	$(function(){
		//数值验证组件
	 	 $('#age').numberbox({    
		    min:0, //最小值
		    max:150, //最大值
		    required:true, //必填
		    missingMessage:'年龄必填！' //提示文字
		});
		
		//datagrid数据表格
		$('#t_student').datagrid({
			idField:'id', //只要创建数据表格必须要加idField
			striped:true, //隔行变色
			url:'list', //异步加载数据路径
			queryParams : {
                tbclassid : $('#mSel').val()
            },
			//title:'数据表格', //表头
			width:'100%', //宽度
			fitColumns: true, //自动宽度
			height:'96%',
			loadMsg: '数据正在加载...请耐心等待....', //在从远程站点加载数据的时候显示提示消息
			rownumbers: true, //在表格前面显示行号
			nowrap:true, //折行显示
			//singleSelect:true, //只允许选中一行
			remoteSort:false, //取消本地排序
			frozenColumns:[ //冻结列，不能与fitColums一起使用
				[
					{
						field:'ck',
						width:50,
						checkbox:true //复选框 与singleSelect冲突
					}
				]
			],
			columns:[
				[	
					{
						field:'stuNum',
						title:'学号',
						width:120,
						align:'center',
						sortable:true //允许列使用排序
					},{
						field:'username',
						title:'用户名',
						width:120,
						align:'center'
					},{
						field:'name',
						title:'姓名',
						width:120,
						align:'center'
					},{
						field:'sex',
						title:'性别',
						width:120,
						align:'center',
						sortable:true
					},{
						field:'age',
						title:'年龄',
						width:120,
						align:'center',
						sortable:true
					}
				]
			],
			pagination:true, //设置分页
			pageSize:10, //设置开始显示几条数据
			pageList:[10,20,25,50 ], //设置分页条数
			toolbar:[
				{
					text:'新增学生',
					iconCls:'icon-add', //小图标
					handler:function(){
						$('#myform').form('clear'); //清空表单数据
						
						var tbclassid = $('#mSel').val(); //获取班级id
						document.getElementById("tbclassid").value = tbclassid; //获取到班级id填充到input中
						
						$('#sex1').val('男');
						$('#sex2').val('女');
						
						
						$('#mydialog').dialog({ //动态生成表头
							title:'新增学生',
						 });
						$('#mydialog').dialog('open');
					}
				},{
					text:'修改信息',
					iconCls:'icon-edit', 
					handler:function(){
						var arr =  $('#t_student').datagrid('getSelections'); //返回选中记录
						//判断是否选择一条记录或多条或未选
						if(arr.length == 0){
							 $.messager.show({
									title:'提示信息!',
									msg:'您还未选择要修改的数据！每次只能修改一条数据哟！',
									height:180,
									width:220
								 });
						 }else if(arr.length != 1){ 
							 $.messager.show({
								title:'提示信息!',
								msg:'每次只能选择一条数据进行修改！',
								height:180,
								width:220
							 });
						 }else{
							 $('#mydialog').dialog({ //动态生成表头
									title:'修改信息',
							 	});
							 $('#mydialog').dialog('open'); //打开窗口
							 $('#myform').form('clear'); //清空表单数据
							 
							 var tbclassid = $('#mSel').val(); //获取班级id
							 document.getElementById("tbclassid").value = tbclassid; //获取到班级id填充到input中
							
							 $('#sex1').val('男');
							 $('#sex2').val('女');
							 
							 //重写数据
							 $('#myform').form('load',{
								 id:arr[0].id,
								 username:arr[0].username,
								 password:arr[0].password,
								 stuNum:arr[0].stuNum,
								 name:arr[0].name,
								 sex:arr[0].sex,
								 email:arr[0].email,
								 age:arr[0].age
							 });
							 
						 }
					}
				},{
					text:'删除学生',
					iconCls:'icon-remove',
					handler:function(){
					var arr = $('#t_student').datagrid('getSelections');
					if(arr.length <= 0){
						$.messager.show({
							title:'提示信息!',
							msg:'至少选择一条数据进行删除',
							height:180,
							width:220
						});
					}else{
						$.messager.confirm('提示信息','确认删除？',function(r){
							if(r){
								 //批量删除
								var ids = '';
								for(var i = 0;i < arr.length;i++){
									ids += arr[i].id+',';
								}
								ids = ids.substring(0 , ids.length - 1);
								$.post('delete',{ids:ids},function(result){
									//1.刷新数据表格
									$('#t_student').datagrid('reload');
									//2.清空idField
									$('#t_student').datagrid('unselectAll');
									//3.提示信息
									$.messager.show({
										title:'提示信息!',
										msg:'操作成功！',
										height:180,
										width:220
									});
									
								});	
							}else{
								return;
							}
						});
						}
					}
				},{
					text:'重置密码',
					iconCls:'icon-reload',
					handler:function(){
						var arr = $('#t_student').datagrid('getSelections');
						if(arr.length <= 0){
							$.messager.show({
								title:'提示信息!',
								msg:'至少选择一条数据进行重置密码！',
								height:180,
								width:220
							});
						}else{
							$.messager.confirm('提示信息','确认重置该学生密码吗？',function(r){
								if(r){
									 //批量删除
									var ids = '';
									for(var i = 0;i < arr.length;i++){
										ids += arr[i].id+',';
									}
									ids = ids.substring(0 , ids.length - 1);
									$.post('reload',{ids:ids},function(result){
										//1.刷新数据表格
										$('#t_student').datagrid('reload');
										//2.清空idField
										$('#t_student').datagrid('unselectAll');
										//3.提示信息
										$.messager.show({
											title:'提示信息!',
											msg:'操作成功！',
											height:180,
											width:220
										});
										
									});	
								}else{
									return;
								}
							});
						}
					}
				},{
					text:'查询学生',
					iconCls:'icon-search',
					handler:function(){
						var tbclassid = $('#mSel').val(); //获取班级id
						document.getElementById("tbclassid1").value = tbclassid; //获取到班级id填充到input中
						$('#lay').layout('expand','north');
					}
				}
			]
		});
		
		//提交表单方法
		$('#btn1').click(function(){
			if($('#myform').form('validate')){
				$.ajax({
					type:'post', //提交方式
					url:'save', //请求地址
					cache : false, //清除缓存
					data : $('#myform').serialize(), //序列化表单
					//dataType:'json', //返回数据格式
					success : function(result) {
						//1.关闭窗口
						$('#mydialog').dialog('close');
						//2.刷新datagrid 保持在当前页
						$('#t_student').datagrid('reload');
						//3.提示信息
						$.messager.show({
							title : '提示信息!',
							msg : '操作成功！',
							height : 180,
							width : 220
						});
					}
				});
			} else {
				$.messager.show({
					title : '提示信息!',
					msg : '数据验证不通过，不能保存！',
					height : 180,
					width : 220
				})
			}
		});

		//关闭窗口
		$('#btn2').click(function() {
			$('#mydialog').dialog('close');
		});
		//查询
		$('#searchbtn').click(function() {
			$('#t_student').datagrid('load', serializeForm($('#mysearch')));
		});
		//清空查询
		$('#clearbtn').click(function() {
			$('#mysearch').form('clear'); //清空表单数据
			$('#t_student').datagrid('load', { //重新刷新表格
				tbclassid : $('#mSel').val()
			//将班级id传入后台
			});
			//防止清空后查询tbclassid为null
			var tbclassid = $('#mSel').val(); //获取班级id
			document.getElementById("tbclassid1").value = tbclassid; //获取到班级id填充到input中
		});
	
	});

	//js方法：序列化表单
	function serializeForm(form) {
		var obj = {};
		$.each(form.serializeArray(), function(index) {
			if (obj[this['name']]) {
				obj[this['name']] = obj[this['name']] + ',' + this['value'];
			} else {
				obj[this['name']] = this['value'];
			}
		});
		return obj;
	};

	//下拉框带动表格
	function mChange(value) {
		$('#t_student').datagrid('load', { //重新刷新表格
			tbclassid : value
		//将班级id传入后台
		});
	};
	
	//空格校验器
	$.extend($.fn.validatebox.defaults.rules, {    
	     isBlank: {
	         validator: function (value, param) { return $.trim(value) != '' },
	         message: '请勿输入纯空格！'
	     }
	});
</script>

</head>
<body>
	<select  onchange="mChange(this.value)"  id="mSel"style="width:200px;height: 30px;" class="form-control">
		<option th:each="l:${tbclass}" th:value="${l.id}" th:text="${l.classname}"></option>
	</select>
	
	<div id="lay" class="easyui-layout" fit=true style="width: 100%;height: 100%;">
		<div region="north" title="用户查询" style="height:80px;" collapsed=true>
			<form id="mysearch" method="post">
				 <div class="input_container" style="margin-top: 15px;">
				 	<input type="hidden" name="tbclassid" id="tbclassid1"/>
					&nbsp;
				 	<input class="easyui-textbox" label="姓名" labelPosition="top" data-options="prompt:'请输入姓名',iconCls:'icon-user'" style="width:200px;height:26px;" name="name">
				 	&nbsp;
				 	<input class="easyui-textbox" label="学号" labelPosition="top" data-options="prompt:'请输入学号',iconCls:'icon-sum'" style="width:200px;height:26px;" name="stuNum">
				 	&nbsp;
				 	<input class="easyui-textbox" label="年龄" labelPosition="top" data-options="prompt:'请输入年龄',iconCls:'icon-sum'" style="width:200px;height:26px;" name="age">
				 	&nbsp;
				 	<a id="searchbtn" class="easyui-linkbutton" iconCls='icon-search'>查询</a>
					<a id="clearbtn" class="easyui-linkbutton" iconCls='icon-undo'>清空</a>
				 </div>
			</form>
		</div>
		<div region="center">
			<table id="t_student"></table>
		</div>
	</div>
	
	<div id="mydialog" class="easyui-dialog" style="width:250px;" closed=true modal=true draggable=false title="新增班级">
		<form id ="myform" action="" method="post">
			<input type="hidden" name="id" value=""/>
			<input type="hidden" name="tbclassid" id="tbclassid"/>
			<table class="input_container">
				<tr>
					<td>
						<label for="username">用户名</label>
					</td>
					<td>
						<input type="text"name="username" id="username" class="easyui-validatebox easyui-textbox" missingMessage="请按邮箱格式输入正确的用户名！" style="width: 180px;"
						data-options="required:true,validType:['email','length[0,20]']">
					</td>
				</tr>
				<tr>
					<td>
						<label for="stuNum">学号</label>
					</td>
					<td>
						<input type="text"name="stuNum" id="stuNum" class="easyui-validatebox easyui-textbox" required=true validType="isBlank" missingMessage="学号必填！"style="width: 180px;">
					</td>
				</tr>
				<tr>
					<td>
						<label for="name">姓名</label>
					</td>
					<td>
						<input type="text"name="name" id="name" class="easyui-validatebox easyui-textbox" required=true validType="isBlank" missingMessage="姓名必填！"style="width: 180px;">
					</td>
				</tr>
				<tr>						
					<td>
						<label for="sex">性别</label>
					</td>
					<td>
						<input type="radio" checked="checked" name="sex" id="sex1">男
						<input type="radio" name="sex" id="sex2">女
					</td>
				</tr>
				<tr>
					<td>
						<label for="age">年龄</label>
					</td>
					<td>
						<input type="text"name="age" id="age" style="width: 180px;">
					</td>
				</tr>
				<tr style="text-align:right;">
					<td colspan="2">
						<a class="easyui-linkbutton" id="btn1" iconCls='icon-save'>确定</a>
						<a class="easyui-linkbutton" id="btn2" iconCls='icon-undo'>关闭</a>
					</td>
				</tr>
			</table>			
		</form>
	</div>
</body>
</html>